<template>
  <a-table
    :columns="props.columns"
    :data="props.data"
    column-resizable
    :bordered="{ cell: true }"
    :loading="props.loading"
    :pagination="props.pagination"
    @pageChange="pageChange"
  >
    <template #optional="{ column, record }">
      <div class="action">
        <div v-for="(item, index) in column.action" :key="item">
          <a-button type="text" @click="actionhandle(item.value,record)">{{ item.text }}</a-button>
        </div>
      </div>
    </template>
  </a-table>
</template>
  
  <script lang="ts" setup>
import { ref } from "vue";
import type {
  TableColumnData,
  TableData,
  TableRowSelection,
} from "@arco-design/web-vue";

interface TableProps {
  pageChange?: Function | null;
  actionFunc?: Function | null;
  columns?: TableColumnData[];
  data?: TableColumnData[];
  loading?:boolean | false;
  pagination?:{}
}
const props = defineProps<TableProps>();
const show = ref(true);

const columns = [
  {
    title: "工号",
    dataIndex: "name",
  },
  {
    title: "姓名",
    dataIndex: "salary",
  },
  {
    title: "性别",
    dataIndex: "address",
  },
  {
    title: "头像",
    dataIndex: "email",
  },
  {
    title: "电话号码",
    dataIndex: "email",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];
const data = [
  {
    key: "1",
    name: "Jane Doe",
    first: "Jane",
    last: "Doe",
    salary: 23000,
    address: "32 Park Road, London",
    email: "jane.doe@example.com",
  },
];
// 操作
const actionhandle = (key,data)=>{
    if(typeof props.actionFunc === "function"){
      props.actionFunc(key,data)
    }
}
// 分页
const pageChange=(page:number)=>{
    if(typeof props.pageChange === "function"){
      props.pageChange(page)
    }
    
}
</script>

<style scoped lang="less">
.action{
  display: flex;
}
</style>